<template>
  <div>
    <div style="width: 100%; height: 100%" ref="echarts"></div>
  </div>
    

</template>
    
    <script>
import * as echarts from "echarts";
export default {
  data() {
    return {
    };
  },
  props: ["dataArr"],
  watch: {
    dataArr: {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal,'weeeeee');
      this.start();
    },
    deep: true
  }
},
  mounted() {
    this.start();
  },
  methods: {
    start() {
        console.log("33333333333333333333");
      var myChart = echarts.init(this.$refs.echarts);
      var option;
      var img =
        "";

      var trafficWay = this.dataArr

      var data = [];
      var color = ["#06bb7b", "#2aaec0", "#b9a671"];
      let bgColor = ["#0afa9e", "#20e0f5", "#f3c95e"];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                shadowBlur: 1,
                borderWidth: 2,
                borderColor: bgColor[i],
                shadowColor: bgColor[i],
                color: color[i],
              },
            },
          },
          {
            value: this.dataArr[0].value/15,//数值控制间隔大小
            name: "",
            itemStyle: {
              normal: {
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [65, 75],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                textStyle: {
                    color: 'white', // 文字颜色
                    fontSize: 14 // 文字大小
                },
                formatter: function (params) {
                  if (params.name) {
                    return `{a|${params.value}}\n {b|${params.name}}`
                  }
                },
                rich:{
                    a:{color:'#FFD700',
                    fontSize:22
                },
                    b:{color:'white',
                    fontSize:14}
                }
              },
                labelLine: {
                  show: true,
                  length:25,
                  length2:15,
                },
                
            },
          },
          data: data,
        },
      ];
      option = {
        color: color,

        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 108,
                height: 108,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },

        toolbox: {
          show: false,
        },
        series: seriesOption,
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
    
    <style>
</style>
    